<template>
    <button @click="openModalHandle">
        使用teleport全屏打开模态框
    </button>

    <teleport to="body">
      <div v-if="modalOpen" class="modal">
        <div>
          这是teleported模态框<br>（展示位置是&lt;body&gt;元素）

<!-- <img v-for=""> -->
          <button @click="closeModalHandle">
            Close
          </button>
        </div>
      </div>
    </teleport>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
    setup () {
        const state = reactive({
            modalOpen: false
        })
        const openModalHandle = () =>{
            state.modalOpen = true
        }
        const closeModalHandle = () =>{
            state.modalOpen = false
        }
        return {
            ...toRefs(state),
            openModalHandle,
            closeModalHandle
        }
    }
}
</script>

<style scoped>
.modal {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.modal div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  width: 300px;
  height: 300px;
  padding: 5px;
}
</style>